<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>博客详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" th:href="@{/读书1.jpg}" type="image/jpg" >
    <link rel="stylesheet" href="../static/layui-v2.5.7/layui/css/layui.css" th:href="@{/layui-v2.5.7/layui/css/layui.css}">
    <!--  -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../static/layui-v2.5.7/layui/layui.js" th:src="@{/layui-v2.5.7/layui/layui.js}"></script>
    <!--  -->
</head>

<style>

    body{
        background-color: rgb(246,246,246);
        min-width: 1450px;
    }

    .head{
         position: fixed;
         width:100%;
         top:0;
         z-index:1;
    }

    .head_div1{
        width:355px;
        height: 30px;
        display: inline-block;
        /* border: 1px solid red; */
        float: right;
        margin: 15px 15px 0px 0px;
        background-color:rgb(57,61,73);
    }

    .head_div1_input1{
        height: 30px;
        width: 300px;
        border-radius: 5px 5px 5px 5px;
        border: none;
        background-color:rgb(232, 232, 232);
        float: left;
    }

    .head_div1_button{
        height: 30px;
        width: 50px;
        border-radius: 5px 5px 5px 5px;
        background-color:rgb(57,61,73);
        border: 1px solid white;
        //font-family: '楷体';
        font-size: 15px;
        line-height: 30px;
        color: white;
        float: right;
    }

    .head_div2{
        float: right;
        display: inline-block;
        margin-right: 15px;
    }

    .head a {
        //color: black !important;
    }

    .div_body{
        background-color: white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin:auto;
        width: 85%;
        padding-bottom:20px;
        margin-top:75px;
        min-height:510px;
    }

   /*  */

   .div_body_div1{
        height:40px;
        font-size:18px;
        //border: 1px solid red;
        line-height:40px;
        width:95%;
        margin:auto;
        margin-top:20px;
   }

   .div_body_div2{
        height:50px;
        font-size:16px;
        //border: 1px solid rgb(222,226,230);
        line-height:50px;
        width:95%;
        margin:auto;
        margin-top:10px;
        //padding-bottom:10px;
   }

   .div_body_div2>img{
        height:50px;
        width:50px;
        float:left;
        border-radius:25px;
   }

   .div_body_div2_span1{
        color: #ffc107;
        margin-left:10px;
   }

   .div_body_div2_span2{
        color: #6c757d;
        margin-left:10px;
   }

   .div_body_div2_span3{
        color: #6c757d;
        margin-left:10px;
        font-weight:700;
   }

   .div_body_div3{
        //border: 1px solid red;
        width:95%;
        margin:auto;
        margin-top:20px;
        line-height:25px;
        font-size:16px;
   }

<!--  -->
    .write{
        background-color: white;
        /* 这个白边不能去 */
        //border: 1px solid red;
        margin: 15px auto 0px;
        width: 85%;
        height:110px;
    }

    .comment_div{
        width: 100%;
        height:40px;
        line-height:40px;
        background-color:rgb(252,252,252);
        border:1px solid rgb(221,221,221);
    }

    .comment_div span{
        font-size:14px;
        font-weight:700;
        margin-left:30px;
    }

    .write_input{
        float:left;
        height:38px;
        border: 1px solid rgb(221,221,221);
        width: 87.5%;
        margin-left:30px;
        margin-top:25px;
        //border-radius:5px;
    }

    #comment_button{
        float:right;
        margin-right:30px;
        margin-top:26px;
    }

   .div_comment{
        background-color: white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin:auto;
        width: 85%;
        padding-bottom:20px;
   }

   .div_comment_div1{
        border-bottom: 1px solid rgb(193,193,193);
        margin:auto;
        width: 95%;
        margin-top:20px;
        padding-bottom:20px;
   }

   .div_comment_div1_div1{
        height:50px;
        //border: 1px solid black;
   }

   .div_comment_div1_div1_div1>img{
       width:50px;
       height:50px;
       //border: 1px solid red;
       border-radius:25px;
   }

   .div_comment_div1_div1_div1{
       width:50px;
       height:50px;
       //border: 1px solid red;
       border-radius:25px;
       float:left;
   }

   .div_comment_div1_div1_div2{
       height:20px;
       width:69%;
       //border: 1px solid red;
       float:left;
       font-size:10px;
       line-height:20px;
       //font-family:'楷体';
       margin-left:10px;
       //display:inline-block;
       color: rgb(108,117,125);
   }

   .div_comment_div1_div1_div2>span{
       margin-right:5px;
   }

   .div_comment_div1_div1_div3{
       height:30px;
       width:69%;
       //border: 1px solid red;
       font-size:16px;
       line-height:30px;
       //font-family:'楷体';
       margin-left:10px;
       //display:inline-block;
       float:left;
   }

   .div_comment_div1_div1_div3_span{
       float:right;
       color:#6c757d;
       font-size:16px;
   }

   .reply_input{
        float:left;
        height:38px;
        border: 1px solid rgb(221,221,221);
        width: 16.5%;
        margin-left:10px;
        margin-top:-15px;
        //border-radius:5px;
    }

   .div_comment_div1_div2{
       //border: 1px solid black;
       //background-color:rgb(221,221,221);
   }

   .div_comment_div1_div2_div1{
        //border: 1px solid red;
        height:40px;
        margin-top:20px;
   }

  .div_comment_div1_div2_div1_div1{
       width:40px;
       height:40px;
       //border: 1px solid red;
       border-radius:20px;
       float:left;
       margin-left:50px;
   }

   .div_comment_div1_div2_div1_div1>img{
       width:40px;
       height:40px;
       //border: 1px solid red;
       border-radius:20px;
   }

   .div_comment_div1_div2_div1_div2{
       height:15px;
       width:900px;
       //border: 1px solid red;
       font-size:8px;
       line-height:15px;
       float:left;
       color:#666;
       //font-family:'楷体';
       margin-left:5px;
       //display:inline-block:
   }

   .div_comment_div1_div2_div1_div2>span{
       margin-right:5px;
   }

   .div_comment_div1_div2_div1_div3{
       height:25px;
       width:900px;
       //border: 1px solid red;
       float:left;
       font-size:14px;
       line-height:25px;
       //font-family:'楷体';
       margin-left:5px;
       //display:inline-block;

   }

<!--  -->
   /* */
    .div_page{
        background-color: white;
        /*border: 1px solid red;*/
        margin:0px auto 15px;
        width: 85%;
        height:60px
    }

   /*  */
    .div_foot {
        width: 100%;
        /*border: 1px red solid;*/
        height: 100px;
        background-color: white;
        margin-top:10px;
        background-color: rgb(57,61,73);
    }

    a {
        text-decoration: none;
    }

    .div_foot_div1 {
        /* border: red 1px solid; */
        width: 990px;
        height: 85px;
        display: inline-block;
        position: relative;
        top: 10px;
        left: 240px;
        text-align: center;
        font-size: 12px;
        line-height: 150%;
        font-family: Arial, Verdana, 宋体;
        color:white;
    }

    .div_foot_div1 div {
        margin-top: 10px;
    }

    .div_foot_div1_div1 a {
        margin: 0 10px;
        color:white;
    }

</style>

<body>

<div class="head">
    <ul class="layui-nav">

        <li class="layui-nav-item">
            <a th:href="@{/index}">
                <i class="layui-icon layui-icon-home"></i>
                首页
            </a>
        </li>

        <li class="layui-nav-item ">
            <a href="">
                <i class="layui-icon layui-icon-notice"></i>
                系统消息
            </a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-read"></i>
                文章类型
            </a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a th:href="@{/list/10/1}">Java</a></dd>
                <dd><a th:href="@{/list/11/1}">C++</a></dd>
                <dd><a th:href="@{/list/12/1}">Python</a></dd>
                <dd><a th:href="@{/list/13/1}">JavaScript</a></dd>
                <dd><a th:href="@{/list/14/1}">c语言</a></dd>
                <dd><a th:href="@{/list/15/1}">云计算</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/post}">
                <i class="layui-icon layui-icon-chat"></i>
                论坛
            </a>
        </li>

        <div class="head_div1">
            <form action="/ImagineCommunity/blogSearchList" method="get">
                <input class="head_div1_input1" name="title" placeholder="&nbsp 输 入 你 想 看 的 文 章 话 题">
                <button class="head_div1_button"><i class="layui-icon layui-icon-search" style="font-size: 25px;"></i></button>
            </form>
        </div>

        <div class="head_div2">
            <li class="layui-nav-item layui-this">
                <a>
                    <i class="layui-icon layui-icon-file-b"></i>
                    文章详情
                </a>
            </li>

            <li class="layui-nav-item">
                <a th:href="@{/friends}">
                    <i class="layui-icon layui-icon-friends"></i>
                    好友列表
                </a>
            </li>

            <li class="layui-nav-item">
                <a href=""><img th:src="${session.user.headImg}" class="layui-nav-img"><span th:text="${session.user.username}">2</span></a>
                <dl class="layui-nav-child">

                    <dd>
                        <a th:href="@{/personalInformation}">
                            <i class="layui-icon layui-icon-chat"></i>
                            个人信息
                        </a>
                    </dd>

                    <dd>
                        <a th:href="@{/outLogin(id = ${session.user.id})}">
                            <i class="layui-icon layui-icon-logout"></i>
                            退了
                        </a>
                    </dd>

                </dl>
            </li>

        </div>
    </ul>
</div>

<div class="div_body">
<!--            <div class='div_body_div1'>-->
<!--                <i class="layui-icon layui-icon-reply-fill"></i>-->
<!--                <span>不想学习</span>-->
<!--            </div>-->
<!--            <div class='div_body_div2'>-->
<!--                <img src="../static/读书1.jpg"></img>-->
<!--                <span class='div_body_div2_span1'>冯志成</span>-->
<!--                <span class='div_body_div2_span2'>发布于</span>-->
<!--                <span class='div_body_div2_span3'>2019-04-15 15:32:18</span>-->
<!--            </div>-->
<!--            <div class='div_body_div3'>呜呜呜！</div>-->
</div>

<div class="write">
    <div class="comment_div"><span>网友评论</span></div>
    <input class="write_input">
    <button type="button" class="layui-btn layui-btn-normal" id="comment_button"><i class='layui-icon layui-icon-reply-fill'></i>评论</button>
</div>

<div class="div_comment">

<!--    <div class="div_comment_div1">-->

<!--        <div class="div_comment_div1_div1">-->
<!--            <div class="div_comment_div1_div1_div1"><img src="../static/读书1.jpg"></div>-->
<!--            <div class="div_comment_div1_div1_div2">-->
<!--                <span>张宇</span>-->
<!--                <span>发布于</span>-->
<!--                <span style="font-weight:700;">2021-03-12 10:03:55</span>-->
<!--            </div>-->
<!--            <div class="div_comment_div1_div1_div3">就是他</div>-->
<!--            <input class="reply_input">-->
<!--            <button type="button" class="layui-btn layui-btn-danger" style="float:right;margin-top:-15px;"><i class='layui-icon layui-icon-reply-fill'></i>回复</button>-->
<!--            <span class="div_comment_div1_div1_div3_span">回复</span>-->
<!--        </div>-->

<!--        <div class="div_comment_div1_div2">-->

<!--            <div class="div_comment_div1_div2_div1">-->
<!--                <div class="div_comment_div1_div2_div1_div1"><img src="../static/读书1.jpg"></div>-->
<!--                <div class="div_comment_div1_div2_div1_div2">-->
<!--                    <span>张宇</span>-->
<!--                    <span>发布于</span>-->
<!--                    <span style="font-weight:700;">2021-03-12 10:03:55</span></div>-->
<!--                <div class="div_comment_div1_div2_div1_div3">就是他</div>-->
<!--            </div>-->

<!--            <div class="div_comment_div1_div2_div1">-->
<!--                <div class="div_comment_div1_div2_div1_div1"><img src="../static/读书1.jpg"></div>-->
<!--                <div class="div_comment_div1_div2_div1_div2">-->
<!--                    <span>张宇</span>-->
<!--                    <span>发布于</span>-->
<!--                    <span style="font-weight:700;">2021-03-12 10:03:55</span>-->
<!--                </div>-->
<!--                <div class="div_comment_div1_div2_div1_div3">就是他</div>-->
<!--            </div>-->

<!--        </div>-->

<!--    </div>-->

</div>

<!-- 底部相同部分 -->
<div th:replace="foot::#foot"></div>

<input type='hidden' id='hidden_blogId' value=''>
</body>
<!--  -->
<script th:inline="javascript">
    <!-- layui -->
    layui.use('element', function () {
        var element = layui.element;
    });

    $(".div_body").empty();
    var id = [[${id}]];

    //console.log(id);

    $.ajax({
        url:'/ImagineCommunity/getBlogDetails',
        data:{id:id,
        },
        success:function(res){
            //console.log(res);
            $('#hidden_blogId').val(res.blogText.id);
            var str =

            "<input id='type_value' type='hidden' value='" + res.blogText.type + "'> " +

            "<div class='div_body_div1'>" +
                "<i class='layui-icon layui-icon-reply-fill'></i>&nbsp" +
                "<span>" + res.blogText.title + "</span>" +
            "</div>" +
            "<div class='div_body_div2'>" +
                "<img src='"+ res.blogText.headImg + "'></img>" +
                "<span class='div_body_div2_span1'>" + res.blogText.userName + "</span>" +
                "<span class='div_body_div2_span2'>发布于</span>" +
                "<span class='div_body_div2_span3'>" + res.blogText.createTime + "</span>" +
            "</div>" +
            "<div class='div_body_div3'>" + res.blogText.content  + "</div>" ;

            $(".div_body").append(str);
        }
    })

    <!--   -->
    layui.use(['flow','form'],function(){
        var flow=layui.flow,form=layui.form;
        $('.div_comment').empty();
        var blogId = $('#hidden_blogId').val();
        //console.log( blogId);
        flow.load ({
            elem: '.div_comment', //指定列表容器
            end:"下面没有评论了",
            done:function(page,next){
                var list=[];
                $.ajax({
                    url:'/ImagineCommunity/getCommentList',
                    data:{pageNo:page,
                          blogId:blogId,
                    },
                    success:function(res){
                        //console.log(res);
                        $.each(res.page.items, function(index, item){

                        var result="";

                        result=
                            "<div class='div_comment_div1'>" +

                                "<div class='div_comment_div1_div1'>" +
                                    "<div class='div_comment_div1_div1_div1'><img src='" + item.headImg + "'></div>" +
                                    "<div class='div_comment_div1_div1_div2'>" +
                                    "<span>" + item.userName + "</span>" +
                                    "<span>发布于</span>" +
                                    "<span style='font-weight:700;'>" + item.createTime + "</span>" +
                                    "</div>" +
                                    "<div class='div_comment_div1_div1_div3'>" + item.content + "</div>" +
                                    "<input class='reply_input'>" +
                                    "<input class='hidden_commentId' type='hidden' value='"+ item.id +"'>" +
                                    "<button type='button' class='layui-btn reply' style='float:right;margin-top:-15px;'><i class='layui-icon layui-icon-reply-fill'></i>回复</button>" +
                                    "<span class='div_comment_div1_div1_div3_span'>回复</span>"+
                                "</div>" +

                                "<div class='div_comment_div1_div2'>";

                                $.each(item.items, function(index, itemTwo){
                                    result+= "<div class='div_comment_div1_div2_div1'>" +
                                        "<div class='div_comment_div1_div2_div1_div1'><img src='" + itemTwo.headImg + "'></div>" +
                                        "<div class='div_comment_div1_div2_div1_div2'>" +
                                        "<span>" + itemTwo.userName + "</span>" +
                                        "<span>发布于</span>" +
                                        "<span style='font-weight:700;'>" + itemTwo.createTime + "</span>" +
                                        "</div>" +
                                        "<div class='div_comment_div1_div2_div1_div3'>" + itemTwo.content + "</div>" +
                                    "</div>"
                                })

                            result+= "</div>" +

                            "</div>"

                            list.push(result);
                        })
                        next(list.join(''), page < res.page.pageTotal);
                        //操作ajax渲染的内容
                        $(".reply_input, .reply").hide();
                    }
                })
            }
        })
    })
    <!--  -->

    <!--  -->
    //添加评论
    $("#comment_button").click(function(){
        var userId = [[${session.user.id}]];
        var blogId = $('#hidden_blogId').val();
        var comment = $(".write_input").val();
        var type = $("#type_value").val();
        if(comment == ""){
            layer.msg("请输入内容!");
            return false;
        }
        layui.use('layer', function () {
            $.ajax({
                url:'/ImagineCommunity/addComment',
                data:{userId:userId,
                     blogId:blogId,
                     content:comment,
                     type:type,
                },
                success:function(res){
                    var commentId = res.commentId;
                    if(res.comment == "yes"){
                        layer.msg(res.msg);
                        setTimeout(function() {
                            <!-- window.location.href = "/ImagineCommunity/blogDetails?id="+blogId; -->

                            var d = new Date(),

                            time = '';

                            time += d.getFullYear() +'-';

                            if((d.getMonth()+1)<10){
                               time += '0'+ (d.getMonth()+1) +'-';
                            }else{
                               time += (d.getMonth()+1) +'-';
                            }

                            if((d.getDate()+1)<10){
                               time += '0'+ d.getDate() +' ';
                            }else{
                               time += d.getDate() +' ';
                            }

                            if((d.getHours()-12) < 10){
                               time += '0'+ (d.getHours()-12) +':';
                            }else{
                               time += (d.getHours()-12) +':';
                            }

                            if(d.getMinutes()<10){
                               time += '0'+ d.getMinutes() +':';
                            }else{
                               time += d.getMinutes()  +':';
                            }

                            if(d.getSeconds()<10){
                               time += '0'+ d.getSeconds();
                            }else{
                               time += d.getSeconds();
                            }

                            var commentString =

                            "<div class='div_comment_div1'>" +

                                "<div class='div_comment_div1_div1'>" +
                                    "<div class='div_comment_div1_div1_div1'><img src='" + [[${session.user.headImg}]] + "'></div>" +

                                    "<div class='div_comment_div1_div1_div2'>" +
                                        "<span>" + [[${session.user.username}]] + "</span>" +
                                        "<span>发布于</span>" +
                                        "<span style='font-weight:700;'>" + time + "</span>" +
                                    "</div>" +

                                    "<div class='div_comment_div1_div1_div3'>" + comment + "</div>" +

                                    "<input class='reply_input'>" +
                                    "<input class='hidden_commentId' type='hidden' value='"+ commentId +"'>" +
                                    "<button type='button' class='layui-btn reply' style='float:right;margin-top:-15px;'><i class='layui-icon layui-icon-reply-fill'></i>回复</button>" +
                                    "<span class='div_comment_div1_div1_div3_span'>回复</span>"+

                                "</div>" +

                                "<div class='div_comment_div1_div2'></div>" +

                            "</div>";

                        $(".div_comment").prepend(commentString);
                        //隐藏按钮
                        $(".reply_input, .reply").hide();

                        }, 1000);
                        return false;
                    }
                    if(res.comment == "no"){
                        layer.msg(res.msg);
                        return false;
                    }
                }
            })
        })
    })

    $(document).on('click','.div_comment_div1_div1_div3_span',function(){
        $(this).hide();
        $(this).parent().find('.reply_input, .reply').show();
    })

    //添加回复
    <!-- 新的内容还能够触发 -->
    $(document).on('click', '.reply', function() {
        var userId = [[${session.user.id}]];
        var commentId = $(this).parent().find('.hidden_commentId').val();
        var reply = $(this).parent().find('.reply_input').val();
        var blogId = $('#hidden_blogId').val();
        var type = $("#type_value").val();
        var that = this;
        if(reply == ""){
            layer.msg("请输入内容!");
            return false;
        }
        layui.use('layer', function () {
            $.ajax({
                url:'/ImagineCommunity/addReply',
                data:{userId:userId,
                      commentId:commentId,
                      content:reply,
                      type:type,
                },
                success:function(res){
                    if(res.reply == "yes"){
                        layer.msg(res.msg);
                        setTimeout(function() {

                            $(that).parent().find('.div_comment_div1_div1_div3_span').show();
                            $(that).parent().find('.reply_input, .reply').hide();

                            <!-- window.location.href = "/ImagineCommunity/blogDetails?id="+blogId; -->

                            var d = new Date(),

                            time = '';

                            time += d.getFullYear() +'-';

                            if((d.getMonth()+1)<10){
                               time += '0'+ (d.getMonth()+1) +'-';
                            }else{
                               time += (d.getMonth()+1) +'-';
                            }

                            if((d.getDate()+1)<10){
                               time += '0'+ d.getDate() +' ';
                            }else{
                               time += d.getDate() +' ';
                            }

                            if((d.getHours()-12) < 10){
                               time += '0'+ (d.getHours()-12) +':';
                            }else{
                               time += (d.getHours()-12) +':';
                            }

                            if(d.getMinutes()<10){
                               time += '0'+ d.getMinutes() +':';
                            }else{
                               time += d.getMinutes()  +':';
                            }

                            if(d.getSeconds()<10){
                               time += '0'+ d.getSeconds();
                            }else{
                               time += d.getSeconds();
                            }

                            var replyString =

                            "<div class='div_comment_div1_div2_div1'>" +
                                "<div class='div_comment_div1_div2_div1_div1'><img src='" + [[${session.user.headImg}]] + "'></div>" +
                                "<div class='div_comment_div1_div2_div1_div2'>" +
                                "<span>" + [[${session.user.username}]] + "</span>" +
                                "<span>发布于</span>" +
                                "<span style='font-weight:700;'>" + time + "</span>" +
                                "</div>" +
                                "<div class='div_comment_div1_div2_div1_div3'>" + reply + "</div>" +
                            "</div>"

                            $(that).parent().parent().find('.div_comment_div1_div2').prepend(replyString);

                        }, 1000);
                        return false;
                    }
                    if(res.reply == "no"){
                        layer.msg(res.msg);
                        return false;
                    }
                }
            })
        })
    })

    <!-- 浏览器关闭事件,浏览器关闭时向后台发送退出链接 -->
    $(window).unload(function(){
        $.ajax({
            url : "/ImagineCommunity/outLogin?id=[[${session.user.id}]]",
        })
    });

</script>
</html>